<template>
  <div class="app-container">
    <div class="head-container">
      <el-button
        v-permission="permission.add"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="handleOpen()"
      >
        新增
      </el-button>
      <el-button
        v-permission="permission.closecoin"
        class="filter-item"
        size="mini"
        type="danger"
        icon="el-icon-plus"
        @click="closeCoin()"
      >
        关闭所有币种
      </el-button>
      <el-button
        v-permission="permission.opencoin"
        class="filter-item"
        size="mini"
        type="danger"
        icon="el-icon-plus"
        @click="openCoin()"
      >
        打开所有币种
      </el-button>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="loading"
      :data="cruddata"
      style="width: 100%"
    >
      <el-table-column type="index" prop="sort" />
      <el-table-column :show-overflow-tooltip="true" prop="id" label="ID" />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="coinCode"
        label="COIN-CODE"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="coinName"
        label="币种名字"
      />
      <el-table-column
        prop="weight"
        :show-overflow-tooltip="true"
        label="权重"
      />
      <el-table-column label="上/下架状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            v-permission="permission.switch"
            :active-value="1"
            :inactive-value="2"
            @change="change(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120px" fixed="right">
        <template slot-scope="scope">
          <div
            v-permission="permission.edit"
            class="btn"
            @click="handleOpen(scope.row)"
          >
            编辑
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <!-- <pagination
      :total="total"
      :page="params.page"
      :limit="params.size"
      @pagination="pagination"
    /> -->

    <!-- 侧抽屉 -->
    <el-drawer
      :visible.sync="drawer"
      :before-close="handleClose"
      direction="rtl"
      :append-to-body="false"
      custom-class="common-drawer"
      size="600px"
      :show-close="false"
    >
      <div slot="title" class="drawer-title">
        <span>{{ title }}</span>
        <span class="el-icon-close" @click="handleClose" />
      </div>
      <div class="drawer-content">
        <el-scrollbar
          :native="false"
          :noresize="false"
          class="dark fix bannerform"
        >
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="250px"
            class="demo-ruleForm"
          >
            <el-form-item label="币种icon：" prop="coinLogo">
              <el-col>
                <el-upload
                  class="img-upload-wrapper"
                  action
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="changeFile"
                >
                  <img
                    v-if="ruleForm.coinLogo"
                    alt
                    :src="ruleForm.coinLogo"
                    class="avatar"
                  >
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-col>
            </el-form-item>
            <el-form-item label="币种code：" prop="coinCode">
              <el-input v-model="ruleForm.coinCode" />
            </el-form-item>
            <el-form-item label="币种code的别名：" prop="coinAliasCode">
              <el-input v-model="ruleForm.coinAliasCode" />
            </el-form-item>
            <el-form-item label="币种英文名称：" prop="coinEnName">
              <el-input v-model="ruleForm.coinEnName" />
            </el-form-item>
            <el-form-item label="币种名称：" prop="coinName">
              <el-input v-model="ruleForm.coinName" />
            </el-form-item>
            <el-form-item label="币种精度：" prop="coinDecimal">
              <el-input v-model="ruleForm.coinDecimal" />
            </el-form-item>
            <el-form-item label="上架状态：" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <!-- <el-radio :label="3">删除</el-radio> -->
                <el-radio :label="1">上架</el-radio>
                <el-radio :label="2">下架</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="openType：" prop="openType">
              <el-radio-group v-model="ruleForm.openType">
                <el-radio :label="1">可充可提</el-radio>
                <el-radio :label="2">可充不提</el-radio>
                <el-radio :label="3">可提不充</el-radio>
                <el-radio :label="4">不提不充</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="充值费用：" prop="depositFee">
              <el-input v-model="ruleForm.depositFee" />
            </el-form-item>
            <el-form-item label="提现最小数量：" prop="withdrawalMinAmount">
              <el-input
                v-model="ruleForm.withdrawalMinAmount"
                @change="changeWithdrawalMinAmount"
              />
            </el-form-item>
            <el-form-item
              v-show="ruleForm.withdrawalMinAmount > 0"
              label="提现费用："
              prop="withdrawalFee"
            >
              <el-input
                v-model="ruleForm.withdrawalFee"
                @change="changeWithdrawalFee"
              />
            </el-form-item>
            <el-form-item
              v-show="ruleForm.withdrawalMinAmount > 0"
              label="站内划转手续费："
              prop="innerTransferFee"
            >
              <el-input
                v-model="ruleForm.innerTransferFee"
                @change="changeInnerTransferFee"
              />
            </el-form-item>
            <el-form-item label="买卖最小单位：" prop="digitLimit">
              <el-input v-model="ruleForm.digitLimit" />
            </el-form-item>
            <el-form-item label="提现地址长度：" prop="length">
              <el-input v-model="ruleForm.length" />
            </el-form-item>
            <el-form-item label="存储精度：" prop="saveDecimal">
              <el-input
                v-model="ruleForm.saveDecimal"
                @change="changeSaveDecimal"
              />
            </el-form-item>
            <el-form-item
              v-show="ruleForm.saveDecimal > 0"
              label="显示精度："
              prop="showDecimal"
            >
              <el-input
                v-model="ruleForm.showDecimal"
                @change="changeShowDecimal"
              />
            </el-form-item>
            <el-form-item
              v-show="ruleForm.saveDecimal > 0"
              label="提币精度："
              prop="amountDecimal"
            >
              <el-input
                v-model="ruleForm.amountDecimal"
                @change="changeAmountDecimal"
              />
            </el-form-item>
            <el-form-item label="need_tag：" prop="needTag">
              <el-switch
                v-model="ruleForm.needTag"
                :active-value="0"
                :inactive-value="1"
              />
            </el-form-item>
            <el-form-item label="合约地址：" prop="contractAddress">
              <el-input v-model="ruleForm.contractAddress" />
            </el-form-item>
            <el-form-item label="区块浏览器地址：" prop="blockExplorer">
              <el-input v-model="ruleForm.blockExplorer" />
            </el-form-item>
            <el-form-item label="平台（公链）：" prop="platform">
              <el-input v-model="ruleForm.platform" />
            </el-form-item>
            <el-form-item label="显示权重：" prop="weight">
              <el-input v-model="ruleForm.weight" />
            </el-form-item>
          </el-form>
        </el-scrollbar>
        <div class="fix-bottom">
          <el-button type="text" @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
          >确认</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import pagination from '@/components/Pagination'
import {
  getCoinList,
  getCoinAdd,
  getCoinUpdate,
  getCoinUpdateStatus,
  closeAllCoin,
  openAllCoin
} from '@/api/currcoin'
import { uploadFile } from '@/api/common/index'
export default {
  name: 'Customer',
  components: { pagination },
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10
      },
      permission: {
        closecoin: ['admin', 'currcoin:closecoin'],
        opencoin: ['admin', 'currcoin:opencoin'],
        switch: ['admin', 'currcoin:switch'],
        add: ['admin', 'currcoin:add'],
        edit: ['admin', 'currcoin:edit'],
        del: ['admin']
      },
      cruddata: [],
      total: 0,
      loading: false,

      drawer: false,
      ruleForm: {
        coinLogo: null,
        coinCode: null,
        coinAliasCode: null,
        coinEnName: null,
        coinName: null,
        coinDecimal: null,
        status: 1,
        openType: 1,
        depositFee: null,
        innerTransferFee: null,
        digitLimit: null,
        withdrawalFee: null,
        length: null,
        withdrawalMinAmount: null,
        saveDecimal: null,
        showDecimal: null,
        amountDecimal: null,
        needTag: 0,
        contractAddress: null,
        blockExplorer: null,
        platform: null,
        weight: null,
        id: null
      },
      rules: {
        coinLogo: [
          { required: true, message: '请选择ICON图', trigger: 'change' }
        ],
        coinCode: [
          { required: true, message: '请输入币种Code', trigger: 'blur' }
        ],
        coinAliasCode: [
          { required: true, message: '请输入币种的别名', trigger: 'blur' }
        ],
        coinEnName: [
          { required: true, message: '请输入币种的英文名称', trigger: 'blur' }
        ],
        coinName: [
          { required: true, message: '请输入币种名称', trigger: 'blur' }
        ],
        coinDecimal: [
          { required: true, message: '请输入币种精度', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ],
        innerTransferFee: [
          { required: true, message: '请输入站内划转手续费', trigger: 'blur' },
          {
            pattern: /^\d+(\.{0,1}\d+){0,1}$/,
            message: '请输入非负数',
            trigger: 'blur'
          }
        ],
        digitLimit: [
          { required: true, message: '请输入买卖最小单位', trigger: 'blur' },
          {
            pattern: /^\d+(\.{0,1}\d+){0,1}$/,
            message: '请输入非负数',
            trigger: 'blur'
          }
        ],
        withdrawalFee: [
          { required: true, message: '请输入提现费用', trigger: 'blur' },
          {
            pattern: /^\d+(\.{0,1}\d+){0,1}$/,
            message: '请输入非负数',
            trigger: 'blur'
          }
        ],
        length: [
          { required: true, message: '请输入提现地址长度', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ],
        withdrawalMinAmount: [
          { required: true, message: '请输入提现最小数量', trigger: 'blur' },
          {
            pattern: /^\d+(\.{0,1}\d+){0,1}$/,
            message: '请输入非负数',
            trigger: 'blur'
          }
        ],
        saveDecimal: [
          { required: true, message: '请输入存储精度', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ],
        showDecimal: [
          { required: true, message: '请输入显示精度', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ],
        amountDecimal: [
          { required: true, message: '请输入提币精度', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ]
      },
      options: [
        {
          value: 0,
          label: '币'
        },
        {
          value: 1,
          label: '赠金'
        },
        {
          value: 2,
          label: '模拟'
        },
        {
          value: 3,
          label: '分析'
        }
      ],
      options2: [],
      id: null,
      title: '新增币种',
      disabled: false,
      checkList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    closeCoin() {
      closeAllCoin().then((res) => {
        if (res.code == 0) {
          this.$message.success('关闭成功')
          this.getList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    openCoin() {
      openAllCoin().then((res) => {
        if (res.code == 0) {
          this.$message.success('打开成功')
          this.getList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleOpen(data) {
      this.drawer = true
      if (data) {
        console.log(data)
        this.title = '编辑币种'
        this.ruleForm = data
      } else {
        this.title = '新增币种'
        this.ruleForm = {
          coinLogo: null,
          coinCode: null,
          coinAliasCode: null,
          coinEnName: null,
          coinName: null,
          coinDecimal: null,
          status: 1,
          openType: 1,
          depositFee: null,
          innerTransferFee: null,
          digitLimit: null,
          withdrawalFee: null,
          length: null,
          withdrawalMinAmount: null,
          saveDecimal: null,
          showDecimal: null,
          amountDecimal: null,
          needTag: 0,
          contractAddress: null,
          blockExplorer: null,
          platform: null,
          weight: null,
          id: null
        }
      }
    },
    handleClose() {
      this.drawer = false
    },
    change(data) {
      getCoinUpdateStatus({
        coinId: data.id,
        status: data.status,
        type: 1
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success('修改成功')
          this.getList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    changeFile(fileRaw) {
      const file = fileRaw.raw
      const isJPG = file.type.indexOf('image') >= 0
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是图片格式!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 1)
      // this.ruleForm.imgFile = file;
      uploadFile(formData).then((res) => {
        if (res.code == 0) {
          this.$set(this.ruleForm, 'coinLogo', res.data.coinLogo)
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const arr = []
          if (this.title === '新增币种') {
            getCoinAdd(this.ruleForm).then((res) => {
              if (res.code == 0) {
                this.$message.success('添加成功')
                this.handleClose()
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            })
          } else if (this.title === '编辑币种') {
            getCoinUpdate(this.ruleForm).then((res) => {
              if (res.code == 0) {
                this.$message.success('修改成功')
                this.handleClose()
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            })
          }
        } else {
          console.log('error submit!!')
          this.$message.error(res.data.message)
          return false
        }
      })
    },
    getList() {
      this.loading = true
      getCoinList(this.params).then((res) => {
        if (res.code == 0) {
          this.cruddata = res.data
          //   this.total = +res.data.data.total;
        } else {
          this.$message.error(res.data.message)
        }
        setTimeout(() => {
          this.loading = false
        }, 1000)
      })
    },
    pagination(data) {
      this.params.page = data.page
      this.params.pageSize = data.limit
      this.getList()
    },
    changeWithdrawalMinAmount() {
      if (+this.ruleForm.withdrawalFee > +this.ruleForm.withdrawalMinAmount) {
        this.$notify.warning({
          title: '警告',
          message: '请重新输入提现费用'
        })
        this.ruleForm.withdrawalFee = null
      }
      if (
        +this.ruleForm.innerTransferFee > +this.ruleForm.withdrawalMinAmount
      ) {
        this.$notify.warning({
          title: '警告',
          message: '请重新输入站内划转手续费'
        })
        this.ruleForm.innerTransferFee = null
      }
    },
    changeWithdrawalFee() {
      if (+this.ruleForm.withdrawalFee > +this.ruleForm.withdrawalMinAmount) {
        this.$notify.error({
          title: '错误',
          message: '提现费用需小于提现最小数量'
        })
        this.ruleForm.withdrawalFee = null
      }
    },
    changeInnerTransferFee() {
      if (
        +this.ruleForm.innerTransferFee > +this.ruleForm.withdrawalMinAmount
      ) {
        this.$notify.error({
          title: '错误',
          message: '站内划转手续费需小于提现最小数量'
        })
        this.ruleForm.innerTransferFee = null
      }
    },
    changeSaveDecimal() {
      if (+this.ruleForm.saveDecimal > 16) {
        this.$notify.warning({
          title: '警告',
          message: '存储精度最大值为16'
        })
        this.ruleForm.saveDecimal = 16
      }
      if (+this.ruleForm.showDecimal > +this.ruleForm.saveDecimal) {
        this.$notify.warning({
          title: '警告',
          message: '请重新输入显示精度'
        })
        this.ruleForm.showDecimal = null
      }
      if (
        +this.ruleForm.amountDecimal > +this.ruleForm.saveDecimal
      ) {
        this.$notify.warning({
          title: '警告',
          message: '请重新输入提币精度'
        })
        this.ruleForm.amountDecimal = null
      }
    },
    changeShowDecimal() {
      if (+this.ruleForm.showDecimal > +this.ruleForm.saveDecimal) {
        this.$notify.error({
          title: '错误',
          message: '显示精度需小于存储精度'
        })
        this.ruleForm.showDecimal = null
      }
    },
    changeAmountDecimal() {
      if (
        +this.ruleForm.amountDecimal > +this.ruleForm.saveDecimal
      ) {
        this.$notify.error({
          title: '错误',
          message: '提币精度需小于存储精度'
        })
        this.ruleForm.amountDecimal = null
      }
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.bannerform {
  .avatar-uploader .el-upload {
    width: 150px !important;
    height: 150px !important;
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff !important;
  }

  .avatar-uploader-icon {
    font-size: 18px !important;
    color: #8c939d !important;
    width: 150px !important;
    height: 150px !important;
    line-height: 150px !important;
    text-align: center !important;
    border: 1px dashed #d9d9d9 !important;
  }

  .avatar {
    width: 150px !important;
    height: 150px !important;
    display: block !important;
  }
}
.btn {
  color: #409eff;
  cursor: pointer;
}
</style>
